<template>
	<view>
		<cu-custom bgColor="bg-gradual-fff" isBack="true">
			<block slot="content">课程订单</block> 
		</cu-custom>
		<loading-view v-if="showLoading"></loading-view>
		<view v-show="!showLoading">
			<view class="viewbox"></view>
			<u-sticky :offset-top="CustomBar">
				<view class="order_list_a">
					<view class="order_list_a_a" @click="order_click(0)" :class="current==0?'order_list_a_aa':''">
						全部
						<view v-if="current==0" class="order_list_a_a_a"></view>
					</view>
					<view class="order_list_a_a" @click="order_click(1)" :class="current==1?'order_list_a_aa':''">
						待支付
						<view v-if="current==1" class="order_list_a_a_a"></view>
					</view>
					<view class="order_list_a_a" @click="order_click(2)" :class="current==2?'order_list_a_aa':''">
						付款成功
						<view v-if="current==2" class="order_list_a_a_a"></view>
					</view>
					<view class="order_list_a_a" @click="order_click(3)" :class="current==3?'order_list_a_aa':''">
						已取消
						<view v-if="current==3" class="order_list_a_a_a"></view>
					</view>
					<view class="order_list_a_a" @click="order_click(4)" :class="current==4?'order_list_a_aa':''">
						退款
						<view v-if="current==4" class="order_list_a_a_a"></view>
					</view>
				</view>
			</u-sticky>
			<view class="order_a" v-if="orderList.length>0">
				<view class="order_a_a" v-for="(item, index) in orderList" :key="index">
					<view style="overflow: hidden;" @click="goPage('/pages/curriculum_order/order_details?order_sn=' + item.order_sn)">
						<view class="order_a_a_a">
							<view class="order_a_a_a_a">
								订单号：{{item.order_sn}}
							</view>
							<view class="order_a_a_a_b">
								{{item.order_status_desc}}
							</view>
						</view>
						
						<view class="order_a_a_b" v-for="(item1, index1) in item.curriculum_order_goods" :key="index1">
							<view class="order_a_a_b_a">
								<custom-image :lazy-load="true" width="140rpx" height="140rpx" radius="8rpx" lazy-load :src="item1.image"></custom-image>
							</view>
							<view class="order_a_a_b_b">
								<view class="order_a_a_b_b_a">{{item1.goods_name}}</view>
								<view class="order_a_a_b_b_b">{{item1.course_type_name}}</view>
								<view class="order_a_a_b_b_c">
									<view class="order_a_a_b_b_c_a" v-if="item1.integral==0 && item1.goods_price>0">
										<span>¥</span>{{item1.goods_price}}
									</view>
									<view class="order_a_a_b_b_c_a" v-if="item1.goods_price==0 && item1.integral>0">
										<span>积分</span>{{item1.integral}}
									</view>
									<view class="order_a_a_b_b_c_a" v-if="item1.goods_price>0 && item1.integral>0">
										<span>积分</span>{{item1.integral}}+<span>¥</span>{{item1.goods_price}}
									</view>
								</view>
							</view>
						</view>
					</view>
					<!-- <view class="order_a_b">
						<view class="order_a_b_b">应付：<span>￥{{item.order_amount}}</span></view>
						<view class="order_a_b_a">共{{item.total_num}}件商品</view>
					</view> -->
					<view class="user_money_log_b_c" v-if="item.order_status==0">
						<view class="user_money_log_b_c_b" v-if="item.order_status==0" @click="goPage('/pages/confirm_order/order_details?order_sn='+item.order_sn+'&from=curriculum')" style="background-color: #fff;border:1rpx solid #FF4D4F;color:#FF4D4F;">付款</view>
						<view class="user_money_log_b_c_b" v-if="item.order_status==0" @click="order_cancel_click(item,index)" style="margin-right: 15rpx; background-color: #fff;border:1rpx solid #DCDCDC;color:#666666;">取消订单</view>
					</view>
				</view>
			</view>
			<loading-footer :status="status" :slot-empty="true">
				<view slot="empty" class="column-center" style="padding-top: 200rpx">
					<image class="img-null" src="/static/goods_null.png"></image>
					<text class="lighter">暂无订单</text>
				</view>
			</loading-footer>
		</view>
	</view>
</template>
<script>
import request from '@/common/request.js';	
import {
	loadingType
} from '@/utils/type';
export default {
	data() {
		return {
			showLoading:true,
			uid:0,
			CustomBarh:0,
			current:0,
			list: ['全部', '待支付', '待发货','待收货','已完成'],
			keyword:'',
			orderList:[],
			status: loadingType.LOADING,
			page: 1,
			limit:8,
			type:0,
			orderId:0,
		}
	},
	onLoad: function(options) {
		this.current =options.current?options.current:0;
	},
	onShow(){
		this.uid=uni.getStorageSync('uid');
		this.CustomBarh=this.CustomBar;
	},
	onReachBottom: function() {
		this.getOrderListFun();
	},
	created() {
	  uni.$on("refreshorder", () => {
	    this.onRefresh();
	  });
	},
	destroyed: function () {
	  uni.$off("refreshorder");
	},
	mounted() {
		this.onRefresh();
	},
	methods: {
		order_cancel_click(item,index){
			let _this=this;
			uni.showModal({
				title: '提示',
				content: '您确认取消该订单吗？',
				success: function (res) {
					if (res.confirm) {
						_this.order_cancel_post(item,index);
					}
				}
			});
		},
		order_cancel_post(item,index){
			let paramsList = {
				uid:this.uid,
				order_id:item.id,
			}
			let optsList = {
				url: 'o-order_curriculum_cancel',
				method: 'post'
			};
			uni.showLoading({
				title: '取消中',
				mask: true
			})
			let _this=this;
			let orderList=this.orderList;
			request.httpTokenRequest(optsList, paramsList).then(res => {
				uni.hideLoading();
				if(res.data.code == 200){
					_this.$nextTick(() => {
						_this.$set(orderList[index],'order_status_desc','已取消');
						_this.$set(orderList[index],'order_status',4);
					})
				}else{
					uni.showToast({
						title: res.data.msg,
						icon:'none',
						duration: 2000
					});
				}
			});
		},
		goPage(url) {
			uni.navigateTo({
				url
			});
		},
		order_click(index) {
			this.current = index;
			this.onRefresh();
		},
		onRefresh() {
			this.page = 1
			this.orderList = []
			this.status = loadingType.LOADING
			this.$nextTick(() => {
				this.getOrderListFun();
			});
		},
		async getOrderListFun() {
			let {
				page,
				limit,
				orderList,
				current,
				keyword,
				status
			} = this;
			if (status == loadingType.FINISHED) return;
			const paramsList = {
				page: page,
				limit:limit,
				type:current,
				keyword:keyword,
				uid:this.uid
			}
			let optsList = {
				url: 'o-curriculumlists',
				method: 'post'
			};
			let _this=this;
			request.httpTokenRequest(optsList, paramsList).then(res => {
				if(res.data.code == 200){
					if(page == 1) orderList = []
					let {
						list,
						more
					} = res.data.data
					this.orderList.push(...list)
					this.page = ++this.page
					if (!more) {
						this.status = loadingType.FINISHED
					}
					if (this.orderList.length <= 0) {
						this.status = loadingType.EMPTY
					}
				} else {
					this.status = loadingType.ERROR
				}
				_this.showLoading=false;
			});
		}
	}
}
</script>

<style  lang="scss" scoped>
	.order_list_a{
		height: 90rpx;
		line-height: 90rpx;
		width: 750rpx;
		background-color: #fff;
	}
	.order_list_a_a{
		width: 20%;
		float: left;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #222222;
		position: relative;
		text-align: center;
	}
	.order_list_a_aa{
		color:#FF4D4F;
	}
	.order_list_a_a_a{
		position: absolute;
		height: 8rpx;
		bottom:5rpx;
		background-color:#FF4D4F;
		width:100rpx;
		left: 50%;
		margin-left: -50rpx;
	}
	.header_wrap{
		background: #F7F7F7;
		overflow: hidden;
		box-sizing: border-box;
	}
	.sousuo{
		width: 750rpx;
		margin: auto;
		background-color: #ffffff;
		display: block;
	}
	.article_list_b{
		height: 79rpx;
		width: 750rpx;
		margin: auto;
		overflow: hidden;
		background: #FFFFFF;
		padding: 0 10rpx;
	}
	.article_list_b_a{
		text-align: center;
		float: left;
		font-size: 28rpx;
		font-family: PingFang;
		font-weight: bold;
		color: #333333;
		height: 79rpx;
		margin-left: 40rpx;
		line-height: 79rpx;
	}
	.article_list_b_a_a{
		width: 37rpx;
		height: 6rpx;
		background: #3F78F6;
		border-radius: 3rpx;
		margin: auto;
		margin-top: -2px;
	}
	.article_list_b_aa{
		color: #227BE5;
	}
	.mr10{
		margin-right: 10rpx;
	}
	.order_a{
		overflow: hidden;
	}
	.order_a_a{
		width: 702rpx;
		height:auto;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: auto;
		margin-top: 20rpx;
		padding: 33rpx 28rpx;
		overflow: hidden;
	}
	.order_a_a_a{
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.order_a_a_a_a{
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		display: flex;
		align-items: center;
	}
	.order_a_a_a_b{
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FF3F4B;
	}
	.order_a_a_b{
		overflow: hidden;
		margin-top: 20rpx;
	}
	.order_a_a_b_a{
		width: 140rpx;
		height: 140rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		float: left;
	}
	.order_a_a_b_b{
		float: right;
		width: 490rpx;
		height: 140rpx;
		overflow: hidden;
	}
	.order_a_a_b_b_a{
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #000000;
		overflow: hidden;
		height: 40rpx;
		line-height: 40rpx;
		text-overflow:ellipsis;    
		white-space: nowrap;
	}
	.order_a_a_b_b_b{
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		overflow: hidden;
		margin-top: 10rpx;
	}
	.order_a_a_b_b_c_a{
		float: left;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FF4D4F;
	}
	.order_a_a_b_b_c_a span{
		ont-size: 24rpx;
	}
	.order_a_a_b_b_c_b{
		float: right;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color:#666666;
	}
	.order_a_a_b_b_c{
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FF3F4B;
		margin-top: 10rpx;
		overflow: hidden;
	}
	.order_a_a_b_b_c span{
		font-size: 24rpx;
	}
	.order_a_a_b_b_c_b{
		float:right;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #000;
	}
	.order_a_b{
		margin-top: 30rpx;
		line-height: 30rpx;
		overflow: hidden;
		width: 100%;
	}
	.order_a_b_a{
		float:right;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}
	.order_a_b_b{
		float:right;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color:#222222;
		margin-left: 20rpx;
	}
	.order_a_b_b span{
		font-size: 24rpx;
	}
	
	.order_a_a_c{
		margin-top: 20rpx;
		text-align: right;
		
	}
	
	.order_a_a_d{
		display: flex;
		align-items: center;
		height: 60rpx;
		margin-top: 30rpx;
	}
	.order_a_a_d_a{
		width: 164rpx;
		height: 60rpx;
		background: #FFFFFF;
		border: 1rpx solid #EE8824;
		border-radius: 30rpx;
		line-height: 60rpx;
		text-align: center;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #EE8824;
		margin-left: 20rpx;
	}
	.order_a_a_d_aa{
		border: 1rpx solid #CCCCCC;
		color: #666666;
	}
	.order_a_a_e{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		margin-top: 20rpx;
	}
	
	.order_a_a_f{
		overflow: hidden;
	}
	.order_a_a_f_a{
		width: 230rpx;
		height: 230rpx;
		float: left;
		margin-right:6rpx;
		margin-top: 23rpx;
	}
	.order_a_a_f_a image:nth-child(3){
		margin-right: 0;
	}
	.user_money_log_b_c{
		height: 60rpx;
		margin-top: 25rpx;
		overflow: hidden;
	}
	
	.user_money_log_b_c_b{
		width: 160rpx;
		height: 60rpx;
		background:#FF4D4F;
		border-radius: 30rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #FFFFFF;
		line-height: 55rpx;
		text-align: center;
		float: right;
		border: 2rpx solid #FF4D4F;
	}
</style>
